<script setup lang="ts">
//常见问题
import Question from "@/assets/base/serve/common/question-icon.png";
import Question2x from "@/assets/base/serve/common/question-icon@2x.png";

const imgQuestion = `url(${Question})`;
const imgQuestion2x = `url(${Question2x})`;
const Data = [
  {
    id: 1,
    class: "goumai",
    title: "购买指南",
    list: [
      {
        id: 1,
        title: "购买渠道",
        link: "#",
      },
      {
        id: 2,
        title: "支付时效",
        link: "#",
      },
      {
        id: 3,
        title: "发票说明",
        link: "#",
      },
      {
        id: 4,
        title: "修改发票抬头",
        link: "#",
      },
    ],
  },
  {
    id: 2,
    class: "dingdan",
    title: "订单物流",
    list: [
      {
        id: 1,
        title: "购买渠道",
        link: "#",
      },
      {
        id: 2,
        title: "支付时效",
        link: "#",
      },
      {
        id: 3,
        title: "发票说明",
        link: "#",
      },
      {
        id: 4,
        title: "修改发票抬头",
        link: "#",
      },
    ],
  },
  {
    id: 3,
    class: "jishu",
    title: "技术支持",
    list: [
      {
        id: 1,
        title: "购买渠道",
        link: "#",
      },
      {
        id: 2,
        title: "支付时效",
        link: "#",
      },
      {
        id: 3,
        title: "发票说明",
        link: "#",
      },
      {
        id: 4,
        title: "修改发票抬头",
        link: "#",
      },
    ],
  },
  {
    id: 4,
    class: "shouhou",
    title: "售后政策",
    list: [
      {
        id: 1,
        title: "购买渠道",
        link: "#",
      },
      {
        id: 2,
        title: "支付时效",
        link: "#",
      },
      {
        id: 3,
        title: "发票说明",
        link: "#",
      },
      {
        id: 4,
        title: "修改发票抬头",
        link: "#",
      },
      {
        id: 5,
        title: "坚果自拍杆",
        link: "#",
      },
      {
        id: 6,
        title: "意外碎屏保修服务",
        link: "#",
      },
    ],
  },
];
</script>
<template>
  <div class="box box-question">
    <header class="title-header">
      <h5 class="title">常见问题</h5>
    </header>
    <div class="panel-content">
      <ul class="banner-list clearfix">
        <li v-for="item in Data" :key="item.id" :class="item.class">
          <h3 class="title">{{ item.title }}</h3>
          <!--这里分两个Ul-->
          <ul class="sub-question clearfix">
            <li v-for="list in item.list" :key="list.id">
              <a :href="list.link">{{ list.title }}</a>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</template>
<style scoped lang="less">
.box .banner-list > li {
  float: left;
  box-sizing: border-box;
  border-right: 1px solid #ececec;
  border-bottom: 1px solid #ececec;
}
.box-question .banner-list > li {
  --bg-image: v-bind(imgQuestion);
  --bg-image-2x: v-bind(imgQuestion2x);
  width: 50%;
  padding: 38px 0 35px 120px;
  background-repeat: no-repeat;
  background-size: 54px auto;
  background-position-x: 35px;
  background-image: var(--bg-image);
  background-image: -webkit-image-set(
    var(--bg-image) 1x,
    var(--bg-image-2x) 2x
  );
}
.box-question {
  .banner-list > {
    li {
      .title {
        font-size: 16px;
        line-height: 1em;
        margin-bottom: 20px;
        color: #333;
        font-weight: 700;
      }
      ul {
        font-size: 12px;
        line-height: 1em;
        color: #999;
        overflow: hidden;
        margin-top: 12px;

        li {
          float: left;
          padding-left: 16px;
          position: relative;
          a:hover {
            color: #6b95ea;
          }
        }
        li:before {
          content: "·";
          position: absolute;
          left: 5px;
        }
        li:first-child {
          padding-left: 0;
        }
      }
    }
    li.goumai {
      background-position-y: 33px;
    }
    li.dingdan {
      background-position-y: -232px;
    }
    li.jishu {
      background-position-y: -90px;
    }
    li.shouhou {
      background-position-y: -344px;
    }
  }
}
</style>
